import { Component, createRef } from "react";
import {
  Modal,
  Form,
  Input,
  Radio,
  Switch,
  InputNumber,
  type FormInstance,
} from "antd";
import MenuSelect from "@/components/menu-select";

const rules = [{ required: true, message: "***" }];

const initialValues = {
  type: 0,
  isShow: true,
  keepAlive: true,
};

interface IProps {
  onOk?: (params: unknown) => void;
}
interface IState {
  visible: boolean;
  title: string;
}

export default class UpsertModal extends Component<IProps, IState> {
  formRef = createRef<FormInstance>();

  // 用于表示当前操作的菜单Id, -1 表示新增 否则为编辑
  curId = -1;

  // 初始化 state
  state: Readonly<IState> = {
    visible: false,
    title: "新增",
  };

  handleCancel = () => {
    this.setState({ visible: false });
  };

  handleOk = async () => {
    // 1. 表单校验
    await this.formRef.current?.validateFields();
    // 2. 校验通过，组装数据

    const params = this.formRef.current?.getFieldsValue();
    //    2.1 如果是编辑的话，需要在 params 中包含有 id 字段
    if (this.curId !== -1) {
      params.id = this.curId;
    }
    // 3. 调用父组件提供的方法
    this.props.onOk?.(params);
  };

  // 提供给父组件用的open方法，用于打开
  open = (record?: Menu.Item) => {
    console.log("record", record);
    this.setState({ visible: true, title: record ? "编辑" : "新增" }, () => {
      // 类似 nextTick
      if (record) {
        // 编辑
        this.curId = record.id;
        this.formRef.current?.setFieldsValue(record); // 赋值，数据回填
      } else {
        // 新增
        this.curId = -1;
        this.formRef.current?.resetFields(); // 重置表单
      }
    });
  };
  // 提供给父组件用的close方法，用于关闭
  close = () => {
    this.setState({ visible: false });
  };

  render() {
    const {
      state: { visible, title },
    } = this;
    return (
      <Modal
        open={visible}
        title={title}
        width={640}
        onCancel={this.handleCancel}
        onOk={this.handleOk}
      >
        <Form
          ref={this.formRef}
          labelCol={{ span: 4 }}
          initialValues={initialValues}
        >
          <Form.Item name="type" label="节点类型" rules={rules}>
            <Radio.Group>
              <Radio value={0}>目录</Radio>
              <Radio value={1}>菜单</Radio>
              <Radio value={2}>按钮</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item name="name" label="节点名称" rules={rules}>
            <Input placeholder="请填写节点名称" />
          </Form.Item>

          <Form.Item name="parentId" label="上级节点">
            {/* Form.Item 组件内写的自定义组件要跟 Form.Item 联动起来的话，需要让这个组件接受 value 与 onChange */}
            <MenuSelect />
          </Form.Item>

          <Form.Item noStyle shouldUpdate>
            {({ getFieldValue }) => {
              switch (getFieldValue("type")) {
                case 0:
                  return (
                    <>
                      <Form.Item
                        name="isShow"
                        label="是否显示"
                        valuePropName="checked"
                      >
                        <Switch />
                      </Form.Item>
                      <Form.Item name="icon" label="节点图标">
                        <Input placeholder="请输入图标" />
                      </Form.Item>
                      <Form.Item name="orderNum" label="节点排序">
                        <InputNumber min={0} />
                      </Form.Item>
                    </>
                  );
                case 1:
                  return (
                    <>
                      <Form.Item name="router" label="节点路由">
                        <Input placeholder="请输入节点路由，如: /test" />
                      </Form.Item>
                      <Form.Item name="keepAlive" label="路由缓存">
                        <Radio.Group>
                          <Radio value={true}>开启</Radio>
                          <Radio value={false}>关闭</Radio>
                        </Radio.Group>
                      </Form.Item>
                      <Form.Item
                        name="isShow"
                        label="是否显示"
                        valuePropName="checked"
                      >
                        <Switch />
                      </Form.Item>
                      <Form.Item name="viewPath" label="文件路径">
                        <Input placeholder="请输入文件路径，如: views/xxx" />
                      </Form.Item>
                      <Form.Item name="icon" label="节点图标">
                        <Input placeholder="请输入图标" />
                      </Form.Item>
                      <Form.Item name="orderNum" label="节点排序">
                        <InputNumber min={0} />
                      </Form.Item>
                    </>
                  );
                case 2:
                  return (
                    <>
                      <Form.Item name="orderNum" label="节点排序">
                        <InputNumber min={0} />
                      </Form.Item>
                      <Form.Item name="perms" label="权限">
                        <Input placeholder="请输入权限" />
                      </Form.Item>
                    </>
                  );
                default:
                  return null;
              }
            }}
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}
